<template>
<div>
    <div class="app-head">
       
        <div class="app-head-left">
            <router-link to='/'>
                <div class="btn-back"></div>
            </router-link>
        </div>
        
        <div class="app-head-title">
            <h4>团购详情</h4>
        </div>
         <div class="app-head-right">
            <ul class="nav-list">
                <li>收藏</li>
                <li>导航</li>
            </ul>
        </div>
    </div>
    <div class="container">
        <div class="picture-wrap" @click="btndrink">
            <div class="word">
                <h1>槟果の茶</h1>
                <span>招牌饮品7选1，提供免费WiFi</span>
            </div>
        </div>
        <div class="special-offer">
            <div class="word"><span>9.9</span>元&nbsp;&nbsp;门市价25元</div>
            <button class="btn-snag" @click="btnsnag">立即抢购</button>
        </div>
        <div class="footnote">
            <ul class="footnote-box">
                <li><span class="detail-icon1"></span>支持随时退款</li>
                <li><span class="detail-icon2"></span>支持过期自动退</li>
                <li><span class="detail-icon3"></span>已售&nbsp;777</li>
            </ul>
        </div>
        <div class="business-information">
            <div class="bus-title">商家信息</div>
                <p class="black">宾果の茶（北京路名盛广场店）</p>
                <p>越秀区北京路禺山路天河城百货名盛广场</p>
                <p class="close"><img src="../assets/images/pos.png">离我最近</p>
                <div class="phone"><img src="../assets/images/phone.png"></div>
            </div>
        </div>
        <div class="menu-table">
            <div class="menus">套餐</div>
            <div class="menus-title">招牌饮料8选1</div>
            <div class="menus">
                <span class="left">罗曼丹若</span>
                <span class="middle">1杯</span>
                <span class="right">25元</span>
            </div>
             <div class="menus">
                <span class="left">超级水果四季春</span>
                <span class="middle">1杯</span>
                <span class="right">25元</span>
            </div>
             <div class="menus">
                <span class="left">满杯百香果</span>
                <span class="middle">1杯</span>
                <span class="right">19元</span>
            </div>
             <div class="menus">
                <span class="left">蜜瓜四季春</span>
                <span class="middle">1杯</span>
                <span class="right">22元</span>
            </div>
             <div class="menus">
                <span class="left">芝士芒芒</span>
                <span class="middle">1杯</span>
                <span class="right">25元</span>
            </div>
             <div class="menus">
                <span class="left">芝士桃桃</span>
                <span class="middle">1杯</span>
                <span class="right">25元</span>
            </div>
             <div class="menus">
                <span class="left">满杯金菠萝</span>
                <span class="middle">1杯</span>
                <span class="right">25元</span>
            </div>
             <div class="menus">
                <span class="left">满杯西柚</span>
                <span class="middle">1杯</span>
                <span class="right">18元</span>
            </div>
        </div>
        <div class="purchase-notes">
            <div class="pn-title">购买须知</div>
            <div class="e90">有效期</div>
            <ul>
                <li>2017.9.22至2018.9.15(周末、法定节假日通用)</li>
            </ul>
            <div class="e90">使用时间</div>
            <ul>
                <li>10:30-21:30</li>
            </ul>
            <div class="e90">使用规则</div>
            <ul>
                <li>无需预约，消费高峰时可能需要等位</li>
                <li>每人最多购买5张每张美团券建议1人使用</li>
                <li>不提供餐巾纸</li>
                <li>店内无包间</li>
                <li>堂食外带均可，可免费打包</li>
                <li>团购用户不可同时享受商家其他优惠</li>
                <li>提供免费WiFi</li>
            </ul>
        </div>
    </div>
</div>
</template>
<script>
export default{
    methods:{
        btnsnag(){
            this.$router.push({path:'/placeorder'});
        },
        btndrink(){
            this.$router.push({path:'/drinkpicture'});
        }
    }
}
</script>
<style>
*{
    margin:0;
    padding:0;
    list-style: none;
}
body {
    background-color: #f0f0f0;
    font-family: "微软雅黑";
    font-size: 14px;
    color: #444;
}
.app-head{
    background-color: #06c1ae;
    color: #fff;
    height: 50px;
    line-height: 50px;
    width: 100%;
    border-bottom: 1px solid #21897d;
}
.app-head .app-head-left{
    float:left;
    width:60px;
    height: 50px;
}
.app-head .app-head-left .btn-back{
    margin-top:15px;
    margin-left:20px;
    transform:rotate(45deg);
    width:20px;
    height:20px;
    border-left:4px solid #fff;
    border-bottom:4px solid #fff;
}
.app-head .app-head-title{
    float:left;
    margin-left:70px;
    height: 50px;
    width:80px;
    text-align:center;
}
.app-head .app-head-title h4{
    line-height:50px;
    color:#fff;
    font-size:16px
}
.app-head .app-head-right{
    float:right;
    height:50px;
    width:80px;
}
.app-head .app-head-right li{
    float:left;
    margin-left:5px;
    color:#fff;
    font-size:13px;
}
.picture-wrap{
    margin:0;
    height:200px;
    width:100%;
    background-image:url("../assets/images/tea3.jpg");
    background-position:-33px -230px;
    position:relative;
}
.picture-wrap .word{
    position:absolute;
    bottom:10px;
    left:20px;
    color:#fff;
    z-index:2;
}
.picture-wrap .word h1{
    margin-bottom:5px;
    font-size:20px;
}
.picture-wrap:after{
    content:'';
    height:120px;
    width:100%;
    position:absolute;
    bottom:0;
    left:0;
    background:-webkit-linear-gradient(bottom,rgba(0,0,0,.58),rgba(0,0,0,.3) 64%,transparent);
}
.special-offer{
    height:70px;
    width:100%;
    margin-bottom:2px;
    background-color:#fff;
}
.special-offer .word{
    line-height:70px;
    float:left;  
    color: #999;
}
.special-offer .word>span{
    color: #06c1ae;
    font-size:30px;
    margin-left:20px;
    font-weight:900;
}
.special-offer .btn-snag{
    float:right;
    margin-right:10px;
    margin-top:9px;
    padding:13px 20px;
    border-radius:5px;
    background-color: #f90;
    color:#fff;
    border:0;
    font-size:20px;
}
.footnote{ 
    background-color:#fff;
    padding:2px;
    height:90px;
    width:100%;
}
.footnote-box{
    padding:15px;
    height:90px;
    width:100%;
}
.footnote-box li{
    float:left;
    padding: 0 60px 10px 0;
    color:#6bbd00;
}
.footnote-box li:last-child{
    color:#666;
}
.footnote-box li .detail-icon1{
    float:left;
    height:29px;
    width:29px;
    background-image:url("../assets/images/detail-icon.png");
    background-repeat:no-repeat;
    display: inline-block;
    background-position:-8px -14px;
    position:relative;
    bottom:6px;
}
.footnote-box li .detail-icon2{
    float:left;
    height:29px;
    width:29px;
    background-image:url("../assets/images/detail-icon.png");
    background-repeat:no-repeat;
    display: inline-block;
    background-position:-197px -14px;
    position:relative;
    bottom:6px;
}
.footnote-box li .detail-icon3{
    float:left;
    height:29px;
    width:29px;
    background-image:url("../assets/images/detail-icon.png");
    background-repeat:no-repeat;
    display: inline-block;
    background-position:-8px -44px;
    position:relative;
    bottom:6px;
}
.business-information{
    margin-top:10px;
    height:120px;
    width:100%;
    background-color:#fff;
    padding:10px;
    color:#333;
    position:relative;
}
.business-information .bus-title{
    border-bottom:1px solid #DDD8CE;
    height:35px;
    font-size:18px;
    line-height:30px;
    margin-bottom:17px;
    float:left;
    padding-right:300px;
}

.business-information p{
    padding-bottom:8px;
    color:#333;
    float:left;
    padding-right:50px;
}
.business-information .black{
    font-weight:900;
    color:black;
    clear:both;
}

.business-information .close{
    color: #EB8706;
}
.business-information .close img{
    width:15px;
    height:15px;
    margin-right:10px;
    background-color:#fff;
}
.business-information .phone{
    width:70px;
    height:70px;
    position:absolute;
    right:40px;
    bottom:10px;
    border-left:1px solid #DDD8CE;
}
.business-information .phone img{
    margin-top:20px;
    margin-left:15px;
    width:30ox;
    height:30px;
}
.menu-table{
    margin-top:10px;
    background-color:#fff;
    color:black;
}
.menu-table .menus{
    border-bottom: 1px solid #DDD8CE;
    padding-left:15px;
    text-align:left;
    font-size:16px;
    height:40px;
    line-height:40px;
    // float:left;
}
.menu-table .menus-title{
    border-bottom: 1px solid #DDD8CE;
    height:35px;
    line-height:35px;
    font-size:16px;
    background-color:#F8F9FA;
}
.menu-table .menus .left{
    display: block;
    float:left;
    width:180px;
    height:40px;
    line-height:40px;
    border-right:1px solid #DDD8CE;
}
.menu-table .menus .middle{
    display: block;
    float:left;
    width:90px;
    height:40px;
    line-height:40px;
    border-right:1px solid #DDD8CE;
    padding-left:10px;
}
.menu-table .menus .right{
    padding-left:10px;
}

.purchase-notes{
    background-color:#fff;
    width:100%;
    height:500px;
    margin-top:10px;
    text-align:left;
    padding:10px;
}
.purchase-notes .pn-title{
    border-bottom:1px solid #DDD8CE;
    height:35px;
    font-size:18px;
    line-height:30px;
    margin-bottom:17px;
}
.purchase-notes .e90{
    color:#f90;
    font-size:16px;
    margin-bottom:15px;
    margin-top:15px;
}
.purchase-notes li{
    margin:0 0 5px 20px;
}
.purchase-notes ul:last-child li{
    list-style:disc outside none;
}
</style>